<!-- cascader -->
<template>
  <el-cascader v-model="values" clearable :placeholder="placeholder" :options="options" :props="{ checkStrictly: checkStrictly }"
               :show-all-levels="showAllLevel" @change="handleChange"></el-cascader>
</template>

<script>
export default {
  name: 'Cascader',
  data () {
    return {
      values: [],
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }]
    }
  },
  props: {
    // 当showAllLevel 为false 值只保留到最后一位
    value: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: '请选择管辖单位'
    },
    // 显示路径 是否全部
    showAllLevel: {
      type: Boolean,
      default: true
    },
    // 选择是否到最后一级
    checkStrictly: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    this.values = this.value
  },
  methods: {
    handleChange (value) {
      this.$emit('input', value)
      this.$emit('change', value)
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
